<template>
	<view class="b-bg page add-form" id="password">
		<view class="add-row">
			<view class="ad-label">
				<text class="iconfont icon-shouji"></text>
				<text>手机号</text>
			</view>
			<view class="ad-inputBox">
				<uni-easyinput class="uni-mt-5" clearSize='0'  trim="all" v-model="form1.user_mobile" placeholder="请输入手机号" ></uni-easyinput>
			</view>
		</view>
		<view class="huafen">
			<view class="add-row">
				<view class="ad-label">
					<text class="iconfont icon-yanzhengma"></text>
					<text>验证码</text>
				</view>
				<view class="ad-inputBox">
					<uni-easyinput class="uni-mt-5" clearSize='0'  trim="all" v-model="form1.code" placeholder="请输入验证码" ></uni-easyinput>
				</view>
			</view>
			<view class="codeBtn">
				<text class="warring" @tap="getYan" v-show="!set">
					<text>获取验证码</text>
				</text>
				<text class="warring" @tap="getYan" v-show="set">
				    <text>( {{time}} )</text>
				</text>
			</view>
		</view>
		
		<view class="add-row">
			<view class="ad-label">
				<text class="iconfont icon-mima"></text>
				<text>新密码</text>
			</view>
			<view class="ad-inputBox">
				<uni-easyinput class="uni-mt-5" type="password" clearSize='0'  trim="all" v-model="form1.password" placeholder="请输入新密码" ></uni-easyinput>
			</view>
		</view>
		<view class="add-sbimtbox">
			<view class="bt bt-a" @tap="submit">完成</view>
		</view>
	</view>
</template>

<script>
	var Phone = /^[1][3,4,5,7,8,9][0-9]{9}$/;
	var Ma = /^[a-zA-Z0-9]{8,16}$/;
	import mixin from '@/util/mixin.js';
	import baseUrl from "@/util/path.js"
	export default {
		mixins: [mixin],
		data() {
			return {
				form1: {
					code:"",
					user_mobile:"",
					password:""
				},
				set:false,
				time:60,
				str:'获取验证码'
			}
		},
		methods: {
			getYan() {
				// console.log(this.form1.username);
				if(!Phone.test(this.form1.user_mobile)) {
					this.toast("请输入正确的手机号");
					return
				}
				const _this = this;
				uni.request({
					url: baseUrl.lb + 'send_mobile_code',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'get',
					data:{
						user_mobile:_this.form1.user_mobile,
						type:3
					},
					success: (res) => {
						console.log(res);
						if(res.data.status == 200) {
							_this.satrtTime();
						}
					},
					fail: (err) => {
						
					}
				})
			},
			satrtTime(){
				const _this = this;
				this.set = true;
				 let Ontime =  setInterval(function () {
					_this.time --;
					if(_this.time == 0) {
						clearInterval(Ontime);
						_this.set = false;
						_this.time = 60;
					}
			    },1000)
			},
			submit(){
				const _this = this;
				if(!Phone.test(this.form1.user_mobile)) {
					this.toast("请输入正确的手机号");
					return
				}
				if(!this.form1.code) {
					this.toast("请输入验证码");
					return
				}
				if(!Ma.test(this.form1.password)) {
					this.toast("请输入密码8-16位字母符号");
					return
				}
				uni.request({
					url: baseUrl.lb + 'api/register/forgot_password',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'post',
					data:{
						...this.form1
					},
					success: (res) => {
						console.log(res);
						if(res.code == 200) {
							this.toast('操作成功');
							this.form1 = {
								code:"",
								user_mobile:"",
								password:""
							}
						}
					},
					fail: (err) => {
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	 .add-sbimtbox {
		 padding-top: 55rpx;
		 @include bt-s-1();
	 }
	 #password {
		 .add-row {
			 background-color: #fff;
			 display: flex;
			 border-radius: 16rpx;
			 margin-bottom: 16px;
			 .ad-label {
				 width: 180rpx;
				 height: 100rpx;
				 font-size: 28rpx;
				 @include center();
				 .iconfont {
					 font-size: 38rpx;
					 margin-right: 10rpx;
					 color:#f4514c;
				 }
			 }
			 .ad-inputBox {
				 width: 544rpx;
				 height: 100rpx;
				 
				 @include center();
			 }
		 }
		 .huafen {
			 display: flex;
			 justify-content: space-between;
			 .ad-inputBox {
				 width: 240rpx !important;
				 flex:none;
			 }
			 .codeBtn {
				 width: 196rpx;
				 height: 100rpx;
				 color:#fff;
				 background-color: #f4514c;
				 border-radius: 10rpx;
				 @include center();
			 }
		 }
	 }
     
</style>
